<template>
  <div>
    <div id="myChart" />
  </div>
</template>

<script>
import * as echarts from 'echarts'
import 'echarts-liquidfill'
export default {
  props: {
    backlog: {
      type: [Object, Array],
      required: true
    }
  },
  data() {
    return {

    }
  },
  created() {
    setTimeout(() => {
      this.fourfall()
    }, 1000)
  },
  methods: {
    fourfall() {
      var label = {
        normal: {
          textStyle: {
            color: '#ffffff',
            insideColor: '#ffffff',
            fontSize: 13
          }
        }
      }
      var myChart = echarts.init(document.getElementById('myChart'))
      myChart.setOption({
        backgroundColor: '#fff',
        graphic: [
          {
            type: 'group',
            left: '9%',
            top: '77%',
            children: [{
              type: 'text',
              z: 100,
              left: 'center',
              top: 'top',
              style: {
                fill: '#000',
                text: '待取件' + 120,
                font: '1vw Microsoft YaHei'
              }
            }]
          },
          {
            type: 'group',
            left: '35%',
            top: '77%',
            children: [{
              type: 'text',
              z: 100,
              left: 'center',
              top: 'top',
              style: {
                fill: '#000',
                text: '待派件',
                font: '1vw Microsoft YaHei'
              }
            }]
          },
          {
            type: 'group',
            left: '56%',
            top: '77%',
            children: [{
              type: 'text',
              z: 100,
              left: 'center',
              top: 'top',
              style: {
                fill: '#000',
                text: '未分配运输',
                font: '1vw Microsoft YaHei'
              }
            }]
          },
          {
            type: 'group',
            left: '82%',
            top: '77%',
            children: [{
              type: 'text',
              z: 100,
              left: 'center',
              top: 'top',
              style: {
                fill: '#000',
                text: '超时运输',
                font: '1vw Microsoft YaHei'
              }
            }]
          }
        ],
        series: [

          {
            name: '水球图',
            type: 'liquidFill',
            radius: '50%',
            center: ['13%', '40%'],
            waveAnimation: 10, // 动画时长
            amplitude: 5, // 振幅
            data: [40 / 100], // 百分比
            itemStyle: { // 渐变色设置
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#38D884'

                }, {
                  offset: 1,
                  color: '#17B9C2'
                }])
              }
            },
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 1,
              y2: 1,
              colorStops: [{
                offset: 1,
                color: '#38D884'
              }, {
                offset: 0,
                color: '#17B9C2'
              }],
              globalCoord: false
            },
            label,
            outline: {
              show: true,
              borderDistance: 0,
              itemStyle: {
                borderWidth: 2,
                borderColor: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 1,
                  colorStops: [{
                    offset: 0,
                    color: '#38D884'
                  }, {
                    offset: 1,
                    color: '#17B9C2'
                  }],
                  globalCoord: false
                }
              }
            },
            backgroundStyle: {
              color: '#58A0AD'
            }
          },
          {
            name: '水球图',
            type: 'liquidFill',
            radius: '50%',
            center: ['38%', '40%'],
            waveAnimation: 10, // 动画时长
            amplitude: 5, // 振幅
            data: [50 / 100],
            itemStyle: { // 渐变色设置
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#F8862C'

                }, {
                  offset: 1,
                  color: '#FA5E56'
                }])
              }
            },
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 1,
              y2: 1,
              colorStops: [{
                offset: 1,
                color: 'rgba(248, 134, 44, 1)'
              }, {
                offset: 0,
                color: 'rgba(250, 94, 86, 1)'
              }],
              globalCoord: false
            },
            label,
            outline: {
              show: true,
              borderDistance: 0,
              itemStyle: {
                borderWidth: 2,
                borderColor: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 1,
                  colorStops: [{
                    offset: 0,
                    color: 'rgba(248, 134, 44, 1)'
                  }, {
                    offset: 1,
                    color: 'rgba(250, 94, 86, 1)'
                  }],
                  globalCoord: false
                }
              }
            },
            backgroundStyle: {
              color: '#8D8690'
            }
          },
          {
            name: '水球图',
            type: 'liquidFill',
            radius: '50%',
            center: ['63%', '40%'],
            waveAnimation: 10, // 动画时长
            amplitude: 5, // 振幅
            data: [60 / 100],
            itemStyle: { // 渐变色设置
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#14DAFF'

                }, {
                  offset: 1,
                  color: '#4C87FF'
                }])
              }
            },
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 1,
              y2: 1,
              colorStops: [{
                offset: 1,
                color: '#14DAFF'
              }, {
                offset: 0,
                color: '#4C87FF'
              }],
              globalCoord: false
            },
            label,
            outline: {
              show: true,
              borderDistance: 0,
              itemStyle: {
                borderWidth: 2,
                borderColor: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 1,
                  colorStops: [{
                    offset: 0,
                    color: '#14DAFF'
                  }, {
                    offset: 1,
                    color: '#4C87FF'
                  }],
                  globalCoord: false
                }
              }
            },
            backgroundStyle: {
              color: '#72A2B3'
            }
          },
          {
            name: '水球图',
            type: 'liquidFill',
            radius: '50%',
            center: ['88%', '40%'],
            waveAnimation: 10, // 动画时长
            amplitude: 5, // 振幅
            data: [90 / 100],
            itemStyle: { // 渐变色设置
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#FF850F'

                }, {
                  offset: 1,
                  color: '#FFBF32'
                }])
              }
            },
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 1,
              y2: 1,
              colorStops: [{
                offset: 1,
                color: '#FF850F'
              }, {
                offset: 0,
                color: '#FFBF32'
              }],
              globalCoord: false
            },
            label,
            outline: {
              show: true,
              borderDistance: 0,
              itemStyle: {
                borderWidth: 2,
                borderColor: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 1,
                  colorStops: [{
                    offset: 0,
                    color: '#FF850F'
                  }, {
                    offset: 1,
                    color: '#FFBF32'
                  }],
                  globalCoord: false
                }
              }
            },
            backgroundStyle: {
              color: '#8D8690'
            }
          }
        ]

      })
    }
  }

}
</script>

<style scoped>
  #myChart{
    height: 260px;
    width: 620px;
  }
</style>
